<template>
    <div class="member-layout">
        <div class="grid-content bor-radius-10 mg-bo-10 pos-relative card-row"
             @click="handler(index)"
        >
            <div style="position:absolute; z-index:1;left: 4px; top: 2px;">
                <el-checkbox @change="setEmployee" v-model="state"></el-checkbox>
            </div>
            <div class="card-01" style="position:relative; z-index:2;">
                <img src="../../../../static/img/member.png">
                <span class="member-name l1">{{item.userName}}</span>
                <div class="role">
                <span :title="item.ujname" v-if="(item.ujname).length > 4">
                  {{item.ujname.slice(0, 4) + "..."}}
                </span>
                    <span v-else-if="(item.ujname).length == 0">
                  暂无
                </span>
                    <span v-else>
                  {{item.ujname}}
                </span>
                    <span class="line">|</span>
                    <span :title="item.roleName" v-if="(item.roleName).length > 4">
                  {{item.roleName.slice(0, 4) + "..."}}
                </span>
                    <span :title="item.roleName" v-else-if="(item.roleName).length == 0">
                  暂无
                </span>
                    <span v-else>
                  {{item.roleName}}
                </span>
                </div>
            </div>
            <div class="btn-info">
                <span @click="info(item.id)">查看修改信息</span>
            </div>
            <!-- <span>Checked names: {{ checkedNames }}</span> -->
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            item: '',
            index: ''
        },
        data: function () {

            return {
                classItem: [],
                checkedNames: [],
                isMultiselect: false,
                state: false
            }
        },
        methods: {
            handler: function (index) {
                this.state = !this.state;
                this.setEmployee();
            },
            setEmployee: function () {
                if(this.state){
                    this.$emit('transferEmployee', this.item)
                }else{
                    this.$emit('deleteEmployee', this.item)
                }
            }
        }

    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .btn-info {
        cursor: pointer;
    }

    .role{
      text-align: center;
      color: #666;
      font-size: 14px;
      padding: 5px 0 10px 0;
    }


</style>
